import React from "react";
import { hashHistory } from 'react-router';
import { i18n } from 'js/core/i18n';
import "./footer.scss";
class Footer extends React.Component {
    render() {
        let routes = this.props.routes;

        return <div id="footer" className="flex-center">
            <div className={"item flex-g-1 flex-col-hcenter" + ((routes === '' || routes === '/home') ? ' active' : '')} onClick={() => {
                hashHistory.push('/home')
            }}>
                <span className={"nav-icon icon-home" + ((routes === '' || routes === '/home') ? ' active' : '')}></span>
                <div className="text">{i18n.get("首页")}</div>
            </div>
            <div className={"item flex-g-1 flex-col-hcenter" + (routes === '/find' ? ' active' : '')} onClick={() => {
                hashHistory.push('/find')
            }}>
                <span className={"nav-icon icon-find" + (routes === '/find' ? ' active' : '')}></span>
                <div className="text">{i18n.get("发现")}</div>
            </div>
            <div className={"item flex-g-1 flex-col-hcenter" + (routes === '/set' ? ' active' : '')} onClick={() => {
                hashHistory.push('/set')
            }}>
                <span className={"nav-icon icon-set" + (routes === '/set' ? ' active' : '')}></span>
                <div className="text">{i18n.get("设置")}</div>
            </div>
            <div className={"item flex-g-1 flex-col-hcenter" + (routes === '/my' ? ' active' : '')} onClick={() => {
                hashHistory.push('/my')
            }}>
                <span className={"nav-icon icon-my" + (routes === '/my' ? ' active' : '')}></span>
                <div className="text">{i18n.get("我的")}</div>
            </div>
        </div>
    }
}

export default Footer;